/*
 * @Author: Sun 
 * @Date: 2019-06-22 17:08:59 
 * @Last Modified by: Sun
 * @Last Modified time: 2019-06-23 08:53:45
 */
import React,{Component,Fragment} from 'react';
import Xiaoitem from './xiaoitem'
import Boss from './Boss'
import axios from 'axios'
import {CSSTransition , TransitionGroup} from 'react-transition-group'
import './style.css'

class Xiao extends Component{
	constructor(props) {//啃死踹克的
	  super(props)
		this.state={
			inputValue:"躺式采耳",
			list:[],
		}
		this.deleteItem=this.deleteItem.bind(this)
	}
	componentWillMount(){
		// console.log("开始执行 1次")
	}
	render(){
		// console.log('render---开始挂载渲染.......')
		return(
			<Fragment>
					{/*
						<li key={index+item}  
						onClick={this.deleteItem.bind(this,index)}
						dangerouslySetInnerHTML={{__html:item}}></li>
					*/}
				<div>
					<label  htmlFor="xiao" >增加服务 :  </label>
					<input 
						id="xiao" className="inp" 
						ref={Xinput=>{this.XinputOne=Xinput}} 
						value={this.state.inputValue} 
						onChange={this.inputchange.bind(this)}
					/>
					<button onClick={this.addList.bind(this)}>增加服务</button>
				</div>
				<ul>
					<TransitionGroup>
						{
							this.state.list.map((item,index)=>{
								return (
									<CSSTransition
									timeout={1000}
									classNames='boss-text'
									unmountOnExit
									appear={true}
									key={index+item}  
							>

									<Xiaoitem 
										key={`xiao`+index} 
										content={item.title} 
										index={index}
										list={this.state.list}
										deleteItem={this.deleteItem}
									/>
									  </CSSTransition>
								)
							})
						}
					</TransitionGroup>
				</ul>
				<Boss></Boss>
			</Fragment>
		) 
	}
	componentWillMount(){
		// console.log('componentWillMount----组件将要挂载到页面的时刻')
	}
	componentDidMount(){//发起请求
		axios.get('http://jsonplaceholder.typicode.com/posts?userId=1')
		.then((res)=>{
			this.setState({
				list:res.data
			})
			console.log("ppp")
			// console.log('componentDidMount',res)
			
	  })
		.catch((error)=>{console.log('axios 获取数据失败'+error)})
    // console.log('componentDidMount----组件挂载完成的时刻执行')
	}
	// shouldComponentUpdate(nextProps,nextState){ //返回一个布尔值
	// 	// if(nextProps.content !== this.props.content){
	// 	// 	return true
	// 	// }else{
	// 	// 		return false
	// 	// }

  //   console.log('19999-shouldComponentUpdate---组件发生改变前执行')
  //   return true
	// }
	//shouldComponentUpdate返回true才会被执行。
	componentWillUpdate(){
    // console.log('2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
	}	
	componentDidUpdate(){
    // console.log('3-componentDidUpdate----组件更新之后执行')
	}
	// 	1-shouldComponentUpdate---组件发生改变前执行
	// 2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
	// 3-render----开始挂载渲染
	// 4-componentDidUpdate----组件更新之后执行

	// 子组件接收到父组件传递过来的参数，
	//父组件render函数重新被执行，这个生命周期就会被执行。

	//也就是说这个组件第一次存在于Dom中，函数是不会被执行的;
	//如果已经存在于Dom中，函数才会被执行。

	componentWillReceiveProps(){
		// console.log('child - componentWillReceiveProps')
	}	
	//当组件从页面中删除的时候执行
	componentWillUnmount(){
		// console.log('child - componentWillUnmount')
	}

	inputchange(e){//监听输入变化 PropType.oneOfType() 属性的类型
	// console.log("ref ==.value",this.XinputOne.value) //ref的使用
		this.setState({
			inputValue:e.target.value
		})
	}
	addList(){//增加列表
		this.setState(()=>({//setState 函数的形式编写
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		}),()=>{
			// console.log("setState异步执行完成")
		})
	}
	deleteItem(index){//删除下标
		console.log("初始数据", this.state.list.length)
		let ls = JSON.parse(JSON.stringify(this.state.list));
		ls.splice(index,1)
		this.setState(()=>({
			list:ls
		}),()=>{
			console.log("sss",this.state.list)
		})
	}
}



export default Xiao;